<template>
	<view class="content">
		<view v-for="item in jsonDate" :key="item.id" class="item">
			<view class="myImg">
				<cover-image :src="'http://localhost:3000/static/' + item.imgAddr"></cover-image>
			</view>
			<view class="right">
				<view class="title">
					<text>
						{{item.goodName}}（{{item.price}}$）
					</text>
				</view>
				<view class="myBtn">
					<button type="primary" plain="true" @click="removeFromShelves(item.id)">下架</button>
				</view>
			</view>

			<!-- 	        <text>ID: {{ item.id }}</text>
	        <text>Name: {{ item.name }}</text>
	        <text>Price: {{ item.price }}</text> -->
		</view>
	</view>
</template>

<script>
	import {
		mySellGoods,
		changeState
	} from '@/api/system/goods.js'

	export default {
		onLoad: function() {
			console.log(this.$store.state.user)
			this.getMySellGoods()
		},
		data() {
			return {
				jsonDate: []
			}
		},
		methods: {
			getMySellGoods() {
				const data = {
					businessId: this.$store.state.user.id,
					state: 0
				}
				mySellGoods(data).then(res => {
					this.jsonDate = res
					console.log(res)
				})
			},
			removeFromShelves(id) {
				this.$modal.confirm('您确定下架该物品？').then(() => {
					changeState(id,{state:2}).then(res=>{
						this.$modal.msgSuccess("成功下架")
						this.getMySellGoods()
					})
					
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px
	}

	.item {
		height: 100px;
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.myImg {
		height: 100%;
		width: 33%;
	}

	.right {
		height: 100%;
		width: 67%;
		display: flex;
		flex-direction: column;
	}


	.title {
		height: 65%;
		width: 100%;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		font-size: 20px;
		/* 设置字体大小为 20 像素 */
		font-weight: bold;
		/* 设置字体加粗 */
	}

	.myBtn {
		height: 35%;
		width: 100%;
	}

	.myBtn button {
		height: 100%;
		/* 设置按钮高度为父元素高度 */
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: center;
		/* 水平居中按钮内部内容 */
		align-items: center;
		/* 垂直居中按钮内部内容 */
	}
</style>